<template>
  <a-modal :open="open" title="收费明细" width="1100px" :footer="false" centered @cancel="onCancel">
    <div class="bg-[#f0f5ff] px-4 pt-2 pb-1 mb-4 flex justify-between">
      <div class="w-28">
        <p class="text-xl font-semibold text-primary mt-4 mb-1">{{ formState.brName }}</p>
        <p>
          <span class="mr-4">{{ formState.brXb }}</span>
          <span>{{ formState.brAge || '-' }}</span>
        </p>
      </div>
      <div class="flex-1 ml-4">
        <div class="flex mt-2">
          <div class="w-3/12">
            <LabelValue label="卡号" :value="formState.brId" />
          </div>
          <div class="w-3/12">
            <LabelValue label="门诊号" :value="formState.jzbh" />
          </div>
          <div class="w-3/12">
            <LabelValue label="票据号" :value="formState.pjhm" />
          </div>
          <div class="w-3/12">
            <LabelValue label="收费员" :value="formState.sfymc" />
          </div>
        </div>
        <div class="flex mt-3">
          <div class="w-3/12">
            <LabelValue label="票据费用" :value="'￥' + formatAmount(formState.ysje ? formState.ysje : 0)" />
          </div>
          <div class="w-3/12">
            <LabelValue label="医保支付" :value="'￥' + formatAmount(formState.ybje ? formState.ybje : 0)" />
          </div>
          <div class="w-3/12">
            <LabelValue label="自费支付" :value="'￥' + formatAmount(formState.zfje ? formState.zfje : 0)" />
          </div>
          <div class="w-3/12">
            <LabelValue label="分币误差" :value="'￥' + formatAmount(formState.fbyh ? formState.fbyh : 0)" />
          </div>
        </div>
        <div class="flex mb-3 mt-3">
          <div class="w-3/12">
            <LabelValue label="优惠金额" :value="'￥' + formatAmount(formState.yhje ? formState.yhje : 0)" />
          </div>
          <div class="w-3/12">
            <LabelValue label="押金支付" :value="'￥' + formatAmount(formState.yjzf ? formState.yjzf : 0)" />
          </div>
          <div class="w-3/12">
            <LabelValue label="抵用券支付" :value="'￥' + formatAmount(formState.dyqzf ? formState.dyqzf : 0)" />
          </div>
          <div class="w-3/12">
            <LabelValue label="会员卡支付" :value="'￥' + formatAmount(formState.vipzf ? formState.vipzf : 0)" />
          </div>
        </div>
        <div class="flex mb-3 mt-3">
          <div class="w-6/12">
            <LabelValue :width="300" label="收费时间" :value="formState.jytime" />
          </div>
        </div>
      </div>
    </div>
    <BaseTable :loading="loading" column-code="00001172" :data-source="tableData" bordered :height="500" :scroll="{ x: 1000 }">
      <template #bodyCell="{ column, index, record }">
        <template v-if="column.dataIndex === 'xh'">
          <div>{{ index + 1 }}</div>
        </template>
        <template v-if="column.dataIndex === 'mc'">
          <template v-if="record.orderType === '1'">
            <PopoverTable
              :width="820"
              :config="detailConfig"
              :params="{ jzbh: record.jzbh, orderType: [2], tcid: record.tcid, cfbh: record.cfbh, yzzt: 1, jfzt: 1 }"
            >
              <template #bodyCell="{ column: popColumn, record: popRecord }">
                <template v-if="popColumn.dataIndex === 'xmmc'">
                  <MedicineInfo :value="{ mc: popRecord.xmmc, gg: popRecord.gg, cj: popRecord.cj }">
                    <template #suffix>
                      <a-badge v-if="popRecord?.insureFlag !== 1" count="自" class="ml-2" :number-style="{ backgroundColor: '#ff9540' }" />
                    </template>
                  </MedicineInfo>
                </template>
              </template>
              {{ record?.mc }}
            </PopoverTable>
          </template>
          <template v-else>
            <MedicineInfo :value="{ mc: record?.mc, gg: record?.gg, cj: record?.cj }" />
          </template>
        </template>
        <template v-if="column.dataIndex === 'dj'">
          <div>{{ getToFixed(record.dj) }}</div>
        </template>
        <template v-if="column.dataIndex === 'je'">
          <div>{{ formatAmount(record.je) }}</div>
        </template>
      </template>
    </BaseTable>
  </a-modal>
</template>
<script setup>
import { ref, watch } from 'vue'
import BaseTable from '@/components/BaseTable'
import LabelValue from '@/components/LabelValue'
import { formatAmount } from '@/utils/format.js'

const emit = defineEmits(['update:open', 'success'])
const props = defineProps({
  open: Boolean,
  rowData: {
    type: Object,
    default: () => ({})
  }
})
const detailConfig = ref({
  url: '/outp/oupCharge/getOutpClinicalOrderInfoList',
  columnCode: '00001190',
  rowKey: 'id',
  formatResult: (data) => {
    return data.map((item, index) => ({
      ...item,
      NO: index + 1
    }))
  }
})
const formState = ref({})
const { loading, tableData, getData } = useTable({
  url: '/outp/oupCharge/getTollRetrievalDetailsList',
  pagination: false,
  immediate: false,
  params: {},
  formatParams: () => {
    return {
      chargeTotleLsh: formState.value?.lsh
    }
  }
})

const getToFixed = (price) => {
  return price === '' || price === null || price === undefined ? '' : price.toFixed(3)
}

const onCancel = () => {
  emit('update:open', false)
}

watch(
  () => props.open,
  (val) => {
    if (val) {
      formState.value = props.rowData
      getData()
    }
  }
)
</script>

<style lang="less" scoped></style>
